<template>
    <div class="plantdetails-container">
        <el-tabs tab-position="left" style="height: 200px;">
            <el-tab-pane v-for="item in details" :key="item.Id" :label="`车间${item.workshop}`">
                 <ve-line :data="chartData"></ve-line>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import {searchWorkshop} from '../../api/api'
import VeLine from 'v-charts/lib/line.common'
export default {
    data(){
        return{
            id:this.$route.params["id"],
            details:null,
            chartData:null
        }
    },
    created(){
        this.getWorkshop();
    },
    methods:{
        getWorkshop(){
            let param = {plant:this.id};
            searchWorkshop(param).then(data=>{
                // console.log("result",data);
                this.details = data;
                let arr= [];
                data.forEach((item)=>{
                    if(item.Id == this.id){
                        console.log(item);
                        return item.forEach((item,index) => {
                            let obj = {};
                            obj.用电量 = item.ele_consumption;
                            obj.用水量 = item.water_consumption;
                            obj.时间 = item.temp_time;
                            arr.push(obj);
                        })
                    }
                });
                this.chartData = {
                    columns: ['时间', '温度', '湿度'],
                    rows: arr
                }; 
            });
        }
    },
    components: { VeLine }
}
</script>
<style lang="scss" scoped>
.plantdetails-container{
    margin-top: 50px;
}
</style>
